<template>
    <div class="p-relative h-100"> 
        <template v-if="isShowMap">
            <LqyMap/>
        </template>
        <template v-else>
            <div>劳动年龄段人口</div>
        </template>           
        <div class="catatoryTool p-absolute flex-row" @click="handleChangeShowMap()">
            <template v-for="(item,index) in list">
                <div class="font-wrap catatoryItem" :key='item.text'>
                    <div class="center p-bottom-5">
                        <template v-if='index == 0'>
                            <template v-if='item.isChecked'>
                                <img src="../../assets/icon/crowd-select.png" class="  img-size-20" alt="">
                            </template>
                            <template v-else>
                                <img src="../../assets/icon/crowd.png" class="img-size-20" alt="">
                            </template>
                        </template>
                        <template v-if='index == 1'>
                            <template v-if='item.isChecked'>
                                <img src="../../assets/icon/move-select.png" class="  img-size-20" alt="">
                            </template>
                            <template v-else>
                                <img src="../../assets/icon/move.png" class="img-size-20" alt="">
                            </template>
                        </template>    


                    </div>

                    <div :class="{'catatoryItem-select':item.isChecked}">{{item.text}}</div>

                </div>
            </template>
        </div>	
        <!-- <div class="catatoryTool colorPanel p-absolute">
            132323
        </div> -->	
    </div>
</template>

<script>
    import LqyMap from '../echarts/LqyMap.vue'
    export default {
        components:{
            LqyMap
        },
        data(){
            return{
                isShowMap:true,
                list:[{text:'常住人口',icon:'crowd',isChecked:true},{text:"劳动年龄段人口",icon:'move',isChecked:false}]
            }
        },
        methods:{
            handleChangeShowMap(){
                // this.isShowMap = !this.isShowMap
            }
        }
    }
</script>

<style lang="scss" scoped>
.catatoryTool{
    // display: none;
    width: fit-content;
    cursor: pointer;
    bottom: .05rem;
    right: 50%;
    transform: translate(50%,0);
    padding: 10px;
    border-radius: 3px;
    border: 1px solid var(--themeColor02);
    background-color: var(--themeColor05);
    z-index:999999;

    .catatoryItem{
        padding:0 10px;
        color:var(--themeColor02);
        font-weight:bold;
    }
    .catatoryItem-select{
        color:var(--themeColor04);
    }


}
.colorPanel{
    right: 0;
}
</style>